//放大镜
class Magnifier {
    constructor() {

        this.eventbind();
        this.mousemove();
        // this.change();
    }

    

    mouseover() {
        $('.mask').css({ display: 'block' });
        $('.big-box').css({ display: 'block' });
    }


    mousemove() {
        let that = this;
        $('.small-box').mousemove(function (evt) {
            let e = evt || event;
            let Yleft = e.pageX - $(this).offset().left - $('.mask').width() / 2;
            let Ytop = e.pageY - $(this).offset().top - $('.mask').height() / 2;

            if (Yleft < 0) {
                Yleft = 0;
            }
            if (Ytop < 0) {
                Ytop = 0;
            }
            if (Yleft > $('.small-box').width() - $('.mask').width()) {
                Yleft = $('.small-box').width() - $('.mask').width() + 'px';
            }
            if (Ytop > $('.small-box').height() - $('.mask').height()) {
                Ytop = $('.small-box').height() - $('.mask').height() + 'px';
            }
            // $('.mask').offset({ 'left': Yleft+'px' });
            // $('.mask').offset({ 'top': Ytop+'px' });

            $('.mask').get(0).style.left = Yleft + 'px'
            $('.mask').get(0).style.top = Ytop + 'px'

            let x = $('.big-box').width() * Yleft / $('.mask').width();
            let y = $('.big-box').height() * Ytop / $('.mask').height();
            $('.big-box').css({ backgroundPositionX: -x + 'px' });
            $('.big-box').css({ backgroundPositionY: -y + 'px' });
        })
    }

    mouseout() {
        $('.mask').css({ display: 'none' });
        $('.big-box').css({ display: 'none' });
    }
    eventbind() {
        let that = this;
        $('.small-box').mouseover(function () {
            that.mouseover();
        })
        $('.small-box').mouseout(function () {
            that.mouseout();
        })
    }

}
let c = new Magnifier();

